---
title: React Spinner (Loader) - Flowbite
description: Indicate a loading status when fetching data by using the spinner component built with React and animated with Tailwind CSS based on multiple colors and sizes
---

The spinner component should be used to indicate a loading status of the content that you're fetching from your database and you can choose from multiple styles, colors, sizes, and animations based on React and Tailwind CSS.

Import the spinner component from Flowbite React to start using it in your project:

```jsx
import { Spinner } from "flowbite-react";
```

## Default spinner

Use the default spinner element by adding the `<Spinner>` React component inside your code and integrate the `aria-label` attribute to allow screen readers parse the component for accessibility.

<Example name="spinner.root" />

## Spinner colors

Update the colors of the loading spinner by using the `color` React prop.

<Example name="spinner.colors" />

## Sizing options

Make the size of the spinner smaller or larger by using the `size` prop. Choose from `xs`, `sm`, `md`, `lg`, or `xl`.

<Example name="spinner.sizing" />

## Alignment

Align the spinner to the left, center or right side of the page by using the utility classes from Tailwind CSS.

<Example name="spinner.alignment" />

## Loading buttons

Add the loading spinner inside a button to indicate fetching status directly inside form submission buttons.

<Example name="spinner.loadingButtons" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="spinner" />

## References

- [Flowbite Spinner](https://flowbite.com/docs/components/spinner/)
